<template>
    <div class="layout-container" style="height: 70vh;">
        <div class="layout-container-table" v-loading="loading">
            <div class="box" ref="box">
                <el-scrollbar height="100%">
                    <el-row :gutter="20">

                        <el-col :xl="24 / 8" :lg="24 / 6" :sm="24 / 4" :xs="24 / 2" v-for="row in list" :key="row.id">
                            <el-card @click="handleEnterCourse(row)" :body-style="{ padding: '0px' }" shadow="hover">
                                <img :src="row.image" class="image">
                                <div style="padding: 14px;">
                                    <el-row style="display: flex; justify-content: space-between;">
                                        <span> {{ row.title }}</span>
                                        <span>
                                            <CourseTag :status="row.status" />
                                        </span>

                                    </el-row>
                                    <el-row class="common-row" style="margin-top: 5px;">
                                        <el-col :span="8">
                                            作业:{{ row.homework_count }}
                                        </el-col>
                                        <el-col :span="8">
                                            实验:{{ row.experiment_count }}
                                        </el-col>
                                        <el-col :span="8">
                                            考试:{{ row.exam_count }}
                                        </el-col>
                                    </el-row>
                                    <el-row class="common-row">
                                        <span> {{ row.term }}</span> <span>{{ row.teacher }}</span>

                                    </el-row>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-empty description="空空如也~" style="height: 500px;" v-show="list.length === 0"></el-empty>
                </el-scrollbar>
            </div>

            <el-pagination v-if="page.total > page.size" v-model:current-page="page.index" class="system-page"
                background layout="total, sizes, prev, pager, next, jumper" :total="page.total" :page-size="page.size"
                :page-sizes="[12, 24, 48]" @current-change="handleCurrentChange" @size-change="handleSizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue'
import {  ref, reactive } from 'vue'
import { Page } from '@/components/table/type'
import { getMyCourseListApi } from '@/api/course'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import CourseTag from '@/views/main/public/publicKit/tag_course.vue'


const router = useRouter()
const store = useStore()
let loading = ref(true)
let list: Ref<{
    exam_count: number
    experiment_count: number,
    homework_count: number,
    id: number,
    image: string,
    status: string,
    teacher: string,
    term: string,
    title: string,
    time: string,
}[]> = ref([])

let box: Ref<HTMLDivElement> = ref() as any
let page: Page = reactive({
    index: 1,
    size: 20,
    total: 0
})
const getListData = (init: Boolean) => {
    loading.value = true
    let params = {
        user_id: store.state.user.user_id,
        is_teacher: store.state.user.is_teacher,
        page: page.index,
        pageSize: page.size
    }
    if (list.value.length === 0 || init) {
        getMyCourseListApi(params)
            .then(res => {
                page.total = res.data.pager.total
                list.value = res.data.list
                store.commit('user/updateCourseCount',res.data.pager.total)
            })
            .catch(err => {
                list.value = []
                page.index = 1
                page.total = 0
            })
            .finally(() => {
                loading.value = false
            })
    }
}
// 分页相关：监听页码切换事件
const handleCurrentChange = (val: number) => {
    page.index = val
    getListData(false)
}
// 分页相关：监听单页显示数量切换事件
const handleSizeChange = (val: number) => {
    page.size = val
    page.index = 1
    getListData(false)
}


getListData(true)
// 点击课程，跳转到课程详情页面
const handleEnterCourse = (row: any) => {
    if (store.state.user.is_teacher)
        router.push({ name: 'teacherCourseDetail', state: { course_id: row.id } })
    else
        router.push({ name: 'studentCourseDetail', state: { course_id: row.id } })
}

</script>

<style lang="scss" scoped>
* {
    text-align: left;
}

.el-col {
    margin-bottom: 20px;
}

.common-row {
    display: flex;
    justify-content: space-between;
}

.box {
    height: calc(100% - 50px);

    margin-bottom: 15px;

    :deep(.is-horizontal) {
        display: none;
    }
}

.common-row {
    font-size: 13px;
    color: #999;
    width: 100%;
}



.edit-button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>